<!-- 查看猫咪 -->
<template>

	<view style="height: 1500rpx;">
		<dybg >

			<cu-custom bgColor="bg-gradual-them" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">猫猫查询</block>
			</cu-custom>

			<view class="u-search-box mystyle_1">
				<view>
					<image :src="logo" mode="aspectFill" class="logo">
					</image>
				</view>

				<!-- <view class="u-search-inner" style="width: 85%;">
					<u-icon name="search" color="#909399" :size="28"></u-icon>
					<text class="u-search-text">请输入要查询的猫猫昵称</text>
				</view> -->

				<view style="width: 85%;">
					<u-search @search="selectACatSearchList" @custom="selectACatSearchList" :animation="true"
						:maxlength="6" placeholder="请输入要查询的猫猫昵称" v-model="keyword"></u-search>
				</view>

			</view>

			<view v-for="(item, id) in recentyList" :key="id">
				<view class="cu-list menu-avatar" @click="goCatMessage(item.id)">

					<view class="cu-item">

						<!-- 猫咪头像 -->
						<view class="cu-avatar round lg">
							<image class="cat-head" :src="item.catImg" mode="aspectFill">
							</image>
						</view>

						<!-- 猫咪类型 -->
						<view class="content">
							<view class="text-cut ">{{item.catName}}</view>
						</view>
					</view>
				</view>

			</view>

			<view style="height: 140rpx;width: 1rpx;"></view>

			<u-toast ref="uToast" />

		</dybg>
	</view>



</template>

<script>
	import Dybg from './mxl-Dybg/Dybg.vue'


	export default {
		components: {
			Dybg,
		},
		data() {
			return {
				// 猫猫信息
				modalName: null,
				skin: false,
				listTouchStart: 0,
				listTouchStartY: 0,
				listTouchDirection: null,
				isLoad: true,
				recentyList: [],
				// 查看类型
				viewId: '',

				logo: '../../static/img/avatar.png',

				keyword: '',
			}
		},
		onLoad(option) {

		},

		methods: {

			selectACatSearchList(e) {
				console.log("子组件传值：", e)
				// 搜索
				this.$u.api.getSeachCat({
					keyword: this.keyword
				}).then(res => {
					console.log("搜索结果:", res)
					if (res.code === 200) {
						// 查询为空
						if (res.data.length === 0) {
							this.$refs.uToast.show({
								title: '未查询到猫猫！',
								type: 'warning',
								url: ''
							})
							return
						}
						// 查到了

						let catMsg = {}

						for (var i = 0; i < res.data.length; i++) {

							catMsg[i] = {};
							catMsg[i]['catType'] = res.data[i].catType; // 猫咪类型       【根据这个进行分类】
							catMsg[i]['id'] = res.data[i].id; // 猫咪编号       【后面的跳转  根据这个进行分类     ❤❤】
							catMsg[i]['catImg'] = this.myimgurl() + res.data[i].catImg; // 猫咪照片
							catMsg[i]['catName'] = res.data[i].catName; // 猫咪昵称

						}

						this.recentyList = catMsg

					} else {
						// 后端出错
						this.$refs.uToast.show({
							title: '系统繁忙，请稍后再试！',
							type: 'error',
							url: ''
						})
						return
					}
				})

			},

			// 向下一级跳转【查看猫咪详细信息】
			goCatMessage(id) {
				uni.navigateTo({
					url: '../catView/message?id=' + id,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cat-head {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}



	.cssBox {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
	}



	.list_title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}

	.list_content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		font-size: 28rpx;
		color: #888;
	}

	.courseBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: -10px;

		view {
			width: 240rpx;
			height: 58rpx;
			border: 2rpx solid #909399;
			text-align: center;
			line-height: 58rpx;
			-webkit-border-radius: 6px;
			border-radius: 12rpx;
			margin: 10rpx 0 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			word-break: break-all;
			font-size: 24rpx;
			color: #909399;
			padding: 0 6rpx;
		}

		.active {
			border: 2rpx solid #2979ff;
			background-color: #2979ff;
			color: #FFFFFF;
		}
	}

	.courseBox::after {
		content: "";
		flex: auto;
	}

	.courseBox>view {
		margin-left: 10px;
		margin-bottom: 10px;
		width: -webkit-calc((100% - 10px*3)/ 3);
		width: calc((100% - 10px*3)/ 3);
	}

	button::after {
		border: none;
		padding: 0;
	}

	// 搜索
	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	// 头像
	.logo {
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
	}

	.mystyle_1 {
		position: relative;
		display: flex;
		// padding: 0 30upx;
		// min-height: 100upx;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center;
	}
</style>
